$border-color1:#e2e2e2;
$text_color1:#45414b;
$lite_posts:.17rem;
$date_color:rgb(138,138,138);


// 所有文章图片公共样式
.bgImg{
    background-position: center center;
    transition: all 1s;
    background-size: cover;
    &:hover{
        opacity: .75;
    }
}
.bgImg.transformImg{
    background-size: 100%;
}
// 图片阴影
.mask{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0,0,0,.2);
    box-shadow: 0 0 200px 200px rgba(0,0,0,.2);
    display: flex;
    align-items: flex-end;
    .contentText{
        color: rgba(239,239,239);
        .typeBtn{
            a{
                display: inline-block;
                padding: .1rem;
                background-color: $text_color1;
                &:hover{
                    background-color: #393440;
                }
            }
            margin-bottom: .06rem;
        }
        .titleText{
            margin: .13rem 0;
        }
        .publicTime{
            color: rgba(239,239,239);
        }
        a{
            color: rgba(239,239,239);
            &:hover{
                color: #fff;
            }
        }
    }
}

// 分类小文章
.category_subContent{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
   margin-top: 30px;
}
// 具体小文章
.subPosts{
    display: flex;
    width: 3.67rem;
    height: .7rem;
    margin-bottom: 20px;
    .media{
        margin-right: .2rem;
    }
    .postsText{
        padding: 4px 0;
        .postsTitle{
            margin-bottom: .1rem;
        }
        .postsDate{
            font-size: .12rem;
            color: $date_color;
            a{
                 color: $date_color;
            }
        }
    }
}
// 横线
.line{
    width: 100%;
    height: .01rem;
    background-color: $border-color1;
}
// 分类按钮
.typeBtn{
    font-size: .1rem;
    a{
        display: inline-block;
        padding: .06rem;
        color: $border-color1;
        background-color: $text_color1;
        &:hover{
            background-color: #393440;
        }
    }
}

.contentText{
    h2,
    h4,
    .desc{
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
    }
}


// 上面都是全局样式

.main{
    display: flex;
    justify-content: space-between;
    margin-top: .35rem;
    margin-bottom: .35rem;
    // 主页左边css样式
    .content-main{
        width: 8.1rem;
        .contentBox{
            width: 7.7rem;
            margin-bottom: .2rem;
            section{
                cursor: pointer;
                position: relative;
                font-size: 0;
                overflow: hidden;
                &:hover{
                    .imgBox{
                        .bgImg{
                            background-size: 105%;
                        }
                    }
                }
                .imgBox{
                    display: inline-block;
                    .bgImg{
                        
                    }
                }
                .mask{
                    // height: 4.05rem;
                    .contentText{
                        padding: .2rem;
                        .typeBtn{
                            a{
                                padding: .1rem;
                                font-size: .1rem;
                            }
                            margin-bottom: .06rem;
                        }
                        .titleText{
                            font-size: .28rem;
                        }
                        .publicTime{
                            font-size: .1rem;
                        }
                        
                    }
                }
               
            }
        }
        .swiperArticle{
            display: flex;
            justify-content: space-between;
            article{
                width: 1.38rem;
                .media{
                    margin-bottom: .16rem;
                    a{
                        .bgImg{
                            // height: .82rem;
                            // width: 1.38rem;
                            &:hover{
                                opacity: .65;
                            }
                        }
                    }
                }
                .contentText{
                    line-height: 1.5;
                    font-size: .14rem;
                    font-weight: 600;
                    width: 100%;
                    height: 40px;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    text-overflow: ellipsis;
                }
            }
        }
        .category_travel{
            .category_content{
                display: flex;
                justify-content: space-between;
                // height: 4.3rem;
                .mainRecommnd{
                    width: 3.67rem;
                    margin-bottom: .2rem;
                    .media{
                    position: relative;
                .bgImg{
                   
                }
                .typeBtn{
                    position: absolute;
                    bottom: 8px;
                    left: 8px;
                }
            }
             
                    .contentText{
                        h2{
                            height: 40px;
                            margin: 10px 0;
                            a{
                                font-size: $lite_posts;
                            }
                        }
                        p{
                            font-size: $lite_posts;
                            font-weight: 400;
                            color: rgb(80,80,80);
                        }
                    }
                }
            }
        }
       
        .category_health{
            .category_content{
                display: flex;
                justify-content: space-between;
                .articleBox{
                    width: 3.67rem;
                    height: 2.45rem;
                    .imgBox{
                        height: 2.45rem;
                    }
                    .mask{
                        left: .1rem;
                        bottom: .1rem;
                        .contentText{
                            padding: 0;
                            .typeBtn{
                                a{
                                    padding: .04rem;
                                }
                            }
                            .titleText{
                                margin: .06rem 0;
                                width: 80%;
                                line-height: 1;
                                a{
                                    font-size: $lite_posts;
                                }
                            }
                        }
                       
                    }
                }
            }
        }
        .category_Trending{
            .trending_Title{
                margin: .3rem 0;
                padding: .1rem .14rem;
                background: #fbfbfb;
                color: $text_color1;
                text-transform: uppercase;
                border: .01rem solid #e8e8e8;
                border-bottom-width: .02rem;
                border-left: 0;
                border-right: 0;


            }
        
        }
        .category_LifeStyle{
            .category_content{
                display: flex;
                justify-content: space-between;
                .mainRecommnd{
                    width: 3.67rem;
                    .media{
                    position: relative;
                    .bgImg{
                        background-size: cover;
                    }
                    .typeBtn{
                        position: absolute;
                        bottom: 8px;
                        left: 8px;
                        a{
                            padding: .04rem;
                            color: #e2e2e2;
                        }
                    }
                    }
                   .contentText{
                        h2{
                            font-size: $lite_posts;
                            font-weight: 600;
                            line-height: 1.5;
                            margin: .09rem 0;
                        }
                        .author{
                            font-size: 14px;
                            color: $date_color;

                        }
                        .postsDate{
                            color: $date_color;
                        }
                        .desc{
                            font-size: $lite_posts;
                            margin-top: .16rem;
                            color: #505050;
                        }
                   }
                }
                .life_right{
                    .line{
                        margin-bottom: .2rem;
                    }
                    
                }
            }
        }
    }
    .aside{
        position: sticky;
        top: 60px;
        height: min-content;
        width: 3.9rem;
        
        .relatedPosts{
            .relatedHeading{
              
            }
            .subPosts{
                margin-top: .3rem;
                .bgImg{
                    background-size: cover;
                }
            }
        }
      
    }
}
.main_bottom{
    display: flex;
    justify-content: space-between;
    background-color: #000000;
    overflow: hidden;
    .bannerBox{
        width: 7.7rem;
        height: 4.65rem;
        .articleBox{
            position: relative;
            .bgBox1{
                height: 4.65rem;
                min-height: 224px;
            }
            .mask{
                .contentText{
                    position: absolute;
                    bottom: .2rem;
                    left: .2rem;
                    .typeBtn{
                        font-size: .14rem;
                    }
                    .titleText{
                        font-size: .28rem;
                    }
                }
            }
        }
      
    }
    .asidePosts{
       padding:.25rem .25rem .2rem 0;
        .subPosts{
            margin-bottom: .17rem;
            &:nth-child(5){
                margin-bottom: 0;
            }

            .bgImg{
                background-size: cover;
            }
            .postsTitle{
                a{
                    color: #e8e8e8;
                }
            }
        }
    }
}
.main_footer{
    display: flex;
    justify-content: space-between;
    .leftBox{
        width: 7.7rem;
        .category_content{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .articleBox{
                position: relative;
                overflow: hidden;
                &:nth-child(n+4){
                    margin-top: .1rem;
                }
                .bgImg{
                    background-size: cover;
                }
                .contentText{
                    padding-left: 8px;
                    .titleText{
                        height: 40px;
                        margin: 4px 0;
                    }
                    .typeBtn{
                        a{
                        padding: 4px;
                        }
                    }
                }
              
            }
        }
        
    }
    .auto{
        width: 4.3rem;
        padding-left: .4rem;
        .category_auto{
            .mainRecommnd{
                .media{
                    position: relative;
                    .bgBox3{
                        width: 3.89rem;
                        height: 2rem;
                    }
                    .typeBtn{
                        position: absolute;
                        bottom: 8px;
                        left: 8px;
                    }
                }
                .contentText{
                    h2{
                        font-size: .17rem;
                        font-weight: 600;
                        line-height: 1.5;
                        margin: .09rem 0;
                    }
                }
                
            }
            .subPosts{
                width: 4.08rem;
            }
        }
    }
}

/* \手机端	*/
@media screen and (max-width: 765px) {
    .main{
        .content-main{
            width: 100%;
            .contentBox {
                width: 426px;
            }
      
            .bannerBox{
                margin-bottom: 16px;
                section{
                    .mask{
                        .contentText{
                            width: 335px;
                            .typeBtn{
                                a{
                                    font-size: 12px;
                                    padding: 4px;
                                }
                            }
                            .titleText{
                                a{
                                    font-size: 14px;
                                }
                            }
                            .publicTime{
                                font-size: 12px;
                            }
                        }
                    }
                }
              
               
            }
            .swiperArticle{
                flex-wrap: wrap;
                justify-content: flex-start;
                .posts{
                    width: 185px;
                    margin-left: 16px;
                    .contentText{
                        height: 40px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        word-break: break-all;
                        h2{
                            a{
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
            .contentBox.category_travel{
                .category_content{
                    width: 390px;
                    margin: 0 auto;
                    flex-wrap: wrap;
                    .posts.mainRecommnd {
                        width: 390px;
                        margin-bottom: 16px;
                        .contentText{
                            h2{
                                a{
                                    font-size: 18px;
                                }
                            }
                            .desc{
                                font-size: 16px;
                            }
                        }
                    .typeBtn{
                        bottom: 4px;
                        left: 4px;
                        a{
                            font-size: 14px;
                            padding: 4px;
                        }
                    }
                    
                    }
                }
                .category_subContent{
                    justify-content: center;
                    .subPosts{
                        width: 390px;
                        height: 70px;
                        .postsDate{
                            font-size: 14px;
                        }
                    }
                }
            }
            .category_health{
                .category_content{
                    flex-wrap: wrap;
                    justify-content: center;
                    .articleBox{
                        width: 390px;
                        height: 260px;
                        margin-bottom: 10px;
                        .imgBox{
                            width: 100%;
                            height: 100%;
                        }
                        .mask{
                            .contentText{
                                .titleText{
                                    a{
                                        font-size: 18px;
                                    }
                                    margin-bottom: 6px;
                                }
                                .desc{
                                    font-size: 16px;
                                    
                                }
                                .publicTime{
                                    font-size: 14px;
                                }
                                .typeBtn{
                                    a{
                                        font-size: 14px;
                                        padding: 4px;
                                    }
                                    margin-bottom: 6px;

                                }
                            }
                        
                        }
                    }
                }
            }
            .category_Trending{
                .trending_Title{
                    padding: 10px 14px;
                }
                .category_subContent{
                    justify-content: center;
                    .subPosts{
                        width: 390px;
                        height: 70px;
                        .postsText{
                            padding-top: 4px;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                        }
                        .postsDate{
                            font-size: 14px;
                        }
                    }
                }
            }
            .category_LifeStyle{
                .category_content{
                    flex-wrap: wrap;
                    justify-content: center;
                    .mainRecommnd{
                        width: 390px;
                        .contentText{
                            h2{
                                a{
                                    font-size: 18px;
                                }
                                margin-bottom: 6px;
                            }
                            .desc{
                                font-size: 16px;
                                
                            }
                            .postsDate{
                                font-size: 14px;
                            }
                            
                        }
                        .typeBtn{
                            bottom: 4px;
                            left: 4px;
                            a{
                                font-size: 12px;
                                padding: 4px;
                            }
                            margin-bottom: 6px;

                        }
                    }
                    .life_right{
                        padding: 20px 0;
                        .subPosts{
                            width: 390px;
                            height: 70px;
                            .postsText{
                                padding-top: 4px;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                                .postsDate{
                                    font-size: 14px;
                                }
                            }
                           
                        }
                        .line{
                            height: 1px;
                            margin: 20px 0;
                        }
                    }
                }
            }
        }
    }
    .main_bottom{
        display: block;
        margin-top: 100px;
        .bannerBox{
            width: 430px;
            height: 224px;
            .articleBox{
                .imgBox{
                    .bgBox1{
                        width: 430px;
                        height: 224px;
                    }
                }
                .mask{
                    .contentText{
                        width: 335px;
                        .typeBtn{
                            a{
                                font-size: 12px;
                                padding: 4px;
                            }
                        }
                        .titleText{
                            a{
                                font-size: 14px;
                            }
                        }
                        .publicTime{
                            font-size: 12px;
                        }
                    }
                }
            }
        }
        .asidePosts{
            padding-bottom: 20px;
            .subPosts{
                width: 390px;
                height: 70px;
                margin: 20px auto;
                .postsText{
                    margin-left: 10px;
                    padding-top: 4px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
                .postsDate{
                    font-size: 14px;
                }
            }
        }
    }
    .main_footer{
        display: block;
        .leftBox{
            width: 100%;
            margin: 0 auto;
            .category_Finance{
                .category_content{
                    flex-wrap: wrap;
                    justify-content: center;
                    .articleBox{
                        width: 390px;
                        height: 260px;
                        margin-bottom: 10px;
                        .bgBox6{
                            width: 390px;
                            height: 260px;
                        }
                        .postsText{
                            margin-left: 10px;
                            padding-top: 4px;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                        }
                        .postsDate{
                            font-size: 14px;
                        }
                        .typeBtn{
                            a{
                                font-size: 12px;
                                padding: 4px;
                            }
                        }
                    }
                }
            }
            
        }
        .auto{
            width: 100%;
            .category_auto{
               .mainRecommnd{
                margin: 0 auto;
                width: 390px;
                margin-bottom: 20px;
                .media{
                    .bgImg {
                        width: 390px;
                        height: 232px;
                    }
                }
                .contentText{
                    width: 100%;
                    
                    h2{
                        a{
                            font-size: 14px;
                        }
                    }
                
                }
                .typeBtn{
                    a{
                        font-size: 12px;
                        padding: 4px;
                    }
                }
            
               } 
               .subPosts{
                width: 390px;
                height: 70px;
                margin: 0 auto;
                .postsDate{
                    font-size: 14px;
                }
               }
            }
        }
    }
    .mask{
        left:10px !important;
        bottom: 10px !important;
    }
}